<template>
  <div>
    <el-row :gutter="10">
      <el-form ref="contract" :model="contractFormData" :rules="rules" size="mini" label-width="100px"
        label-position="top">
        <el-col :span="12">
          <el-form-item label="用户ID" prop="id">
            <el-input v-model="contractFormData.id" placeholder="请输入合同ID" readonly :disabled='true'
              clearable prefix-icon='el-icon-folder' :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="用户名" prop="name">
            <el-input v-model="contractFormData.name" placeholder="请输入合同名称" :maxlength="20"
              show-word-limit :disabled='true' clearable prefix-icon='el-icon-document'
              :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="学号" prop="username">
            <el-input v-model="contractFormData.username" placeholder="请输入合同名称" :maxlength="20"
              show-word-limit :disabled='true' clearable prefix-icon='el-icon-document'
              :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="学院" prop="facultyTitle">
            <el-input v-model="contractFormData.facultyTitle" placeholder="请输入合同名称" :maxlength="20"
              show-word-limit :disabled='true' clearable prefix-icon='el-icon-document'
              :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="填报时间" prop="updateTime">
            <el-input v-model="contractFormData.updateTime" placeholder="请输入总金额" readonly
              :disabled='true' prefix-icon='el-icon-star-on' :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>
<script>
import {contractUpdate} from '@/api/sale'

export default {
  components: {},
  props: ['contractInfo'],
  data() {
    return {
      contractFormData: {
        contractId: undefined,
        contractName: undefined,
        contractDescription: undefined,
        fulfilled: 0,
        paid: 0,
        contractTotalCost: undefined,
        hasPaid: undefined,
      },
      rules: {
        contractId: [],
        contractName: [{
          required: true,
          message: '请输入合同名称',
          trigger: 'blur'
        }],
        contractDescription: [{
          required: true,
          message: '请输入合同描述',
          trigger: 'blur'
        }],
        fulfilled: [{
          required: true,
          message: '请选择履行状态',
          trigger: 'change'
        }],
        paid: [{
          required: true,
          message: '请选择是否已付清款项',
          trigger: 'change'
        }],
        contractTotalCost: [{
          required: true,
          message: '请输入总金额',
          trigger: 'blur'
        }],
        hasPaid: [{
          required: true,
          message: '请输入已付款金额',
          trigger: 'blur'
        }],
      },
      fulfilledOptions: [{
        "label": "未履行",
        "value": 0
      }, {
        "label": "正在履行",
        "value": 1
      }, {
        "label": "履行完毕",
        "value": 2
      }],
      paidOptions: [{
        "label": "未付清",
        "value": 0
      }, {
        "label": "已付清",
        "value": 1
      }],
    }
  },
  computed: {},
  watch: {
    contractInfo: function(n , o){
      this.contractFormData = n
    }
  },
  created() {
    this.contractFormData = this.contractInfo
  },
  mounted() {},
  methods: {
    submitForm() {
      this.$refs['contract'].validate(valid => {
        if (!valid) return
        // 修改合同
        contractUpdate(this.contractFormData).then(res => {
          console.log(res);
        })
      })
    },
    resetForm() {
      this.$refs['contract'].resetFields()
    },
  }
}

</script>
<style>
</style>
